<template>
  <view class="box">
    <view class="hearder">
      <uni-icons
        @click="blackHandler"
        type="left"
        size="26"
        color="#fff"
      ></uni-icons>
      <text>核销记录</text>
      <text style="margin-right: 4px" @click="toggle('top')">筛选</text>
    </view>
    <view v-if="userBugInfo.length">
      <scroll-view
        class="scrollY padding20"
        scroll-y="true"
        scroll-with-animation="true"
        @scrolltolower="scrolltolowerFnc"
      >
        <view class="record mb15 padding20" v-for="item in userBugInfo">
          <view class="rcord-top">
            <view class="date">姓名：{{ item.realname }} </view>
            <view class="date-tj"> {{ item.createTime }}</view>
          </view>
          <view class="idCard"> 身份证号：{{ item.idcard }} </view>
          <view class="order-num"> 卡号{{ item.cardNo }} </view>
        </view>
        <view v-if="noData" style="text-align: center; color: #aaa">
          没有更多数据了
        </view>
      </scroll-view>
    </view>
    <view class="noneData" v-else>
      <image src="/static/images/noneData.png" mode="widthFix" />
      <text>暂无数据</text>
    </view>
    <uni-popup :is-mask-click="false" ref="popup" background-color="#fff">
      <view class="popup">
        <view class="top">
          <text class="title">时间跨度</text>
          <view class="labs">
            <label
              @click="labHandler(item.key)"
              :class="{ labelActiv: labCurren == item.key }"
              v-for="item in dateLabs"
              :key="item.key"
              >{{ item.name }}</label
            >
          </view>
        </view>
        <view class="footer">
          <text class="title">自定义日期</text>
          <view class="datas">
            <view class="date" @click="openDatetimePicker(1)">
              {{ params.startTime || "开始日期" }}
            </view>
            <view class="line">-</view>
            <view class="date" @click="openDatetimePicker(2)">
              {{ params.endTime || "结束日期" }}
            </view>
          </view>
        </view>
      </view>
      <view class="btns">
        <view @click="popupClose">取消</view>
        <view class="ok" @click="okSubmit">确定</view>
      </view>
    </uni-popup>
    <buuug7-simple-datetime-picker
      ref="myPicker"
      :start-year="2000"
      :end-year="2099"
      :time-hide="[true, true, true, false, false, false]"
      :time-label="['年', '月', '日']"
      @submit="handleSubmit($event)"
    />
  </view>
</template>

<script>
import moment from "moment";
import { hospitalSelectRecord } from "@/api/trading.js";
const dateLabs = [
  {
    name: "当日",
    key: 1,
  },
  {
    name: "近7日",
    key: 2,
  },
  {
    name: "近1个月",
    key: 3,
  },
  {
    name: "近3个月",
    key: 4,
  },
];
export default {
  data() {
    return {
      userBugInfo: [],
      dateLabs,
      labCurren: -1,
      dateType: -1,
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      noData: false,
    };
  },
  onLoad() {
    this.requestJybbusinessorderList();
  },
  methods: {
    blackHandler() {
      uni.navigateBack();
    },
    handleSubmit(e) {
      const { year, month, day } = e;
      if (this.dateType == 1) {
        this.$set(this.params, "startTime", year + "-" + month + "-" + day);
      }
      if (this.dateType == 2) {
        this.$set(this.params, "endTime", year + "-" + month + "-" + day);
      }
    },
    openDatetimePicker(type) {
      this.dateType = type;
      this.$refs.myPicker.show();
    },

    okSubmit() {
      this.params.pageNo = 1;
      this.params.pageSize = 10;
      this.userBugInfo = [];
      this.requestJybbusinessorderList();
    },
    labHandler(key) {
      this.labCurren = key;
      const _day = moment().format("YYYY-MM-DD");
      this.params.endTime = _day;
      switch (key) {
        case 1:
          this.params.startTime = _day;
          break;
        case 2:
          const _d = moment().subtract(7, "days").format("YYYY-MM-DD");
          this.params.startTime = _d;
          break;
        case 3:
          const _m = moment().subtract(1, "month").format("YYYY-MM-DD");
          this.params.startTime = _m;
          break;
        case 4:
          const _ms = moment().subtract(3, "month").format("YYYY-MM-DD");
          this.params.startTime = _ms;
          break;
      }
    },
    popupClose() {
      this.close();
    },
    toggle(type) {
      this.$refs.popup.open(type);
    },
    scrolltolowerFnc() {
      if (this.noData) return;
      this.requestJybbusinessorderList();
    },
    close() {
      this.$refs.popup.close();
      this.labCurren = -1;
      this.$set(this.params, "startTime", "");
      this.$set(this.params, "endTime", "");
    },
    requestJybbusinessorderList() {
      uni.showLoading({
        title: "正在加载",
      });
      const params = this.params;
      console.log(params, "----请求数据");
      hospitalSelectRecord(params)
        .then((res) => {
          const _list = res.result.records || [];
          console.log(_list.length, "----返回数据");
          this.noData = _list.length < this.params.pageSize;
          this.params.pageNo++;
          this.userBugInfo = [...this.userBugInfo, ..._list];
          uni.hideLoading();
          this.close();
        })
        .catch((res) => {
          this.$util.Tips({
            title: res,
          });
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../static/css/gstyle.scss");
.popup {
  padding: 0 30rpx;
  .title {
    display: block;
    margin: 30rpx 0;
  }
  .top {
    border-bottom: 1px solid rgb(213, 213, 213);
    padding-bottom: 30rpx;

    .labs {
      display: flex;
      justify-content: space-between;
      label {
        display: inline-block;
        border: 1px solid rgb(46, 46, 46);
        border-radius: 10rpx;
        width: 130rpx;
        height: 55rpx;
        line-height: 55rpx;
        text-align: center;
        font-size: 24rpx;
      }
    }
    .labelActiv {
      background: linear-gradient(#60ca77, #3bc99e);
      color: white;
      border: 0px solid transparent !important;
    }
  }
  .footer {
    .datas {
      display: flex;
      align-items: center;
      .date {
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background-color: #ededed;
      }
      .line {
        width: 50rpx;
        text-align: center;
      }
    }
  }
}
.btns {
  font-size: 30rpx;
  display: flex;
  view {
    width: 50%;
    text-align: center;
    height: 90rpx;
    line-height: 90rpx;
    margin-top: 20rpx;
    border-top: 1px solid rgb(213, 213, 213);
  }
  .ok {
    color: white;
    background: linear-gradient(#60ca77, #3bc99e);
  }
}
.box {
  .hearder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    background-color: #60ca77;
    color: white;
    text-align: center;
    padding: 0 4px;
  }
  .scrollY {
    height: calc(100vh - 44px);
  }
  .record {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: $box-shadow;
    border-radius: $uni-border-radius-lg;
    background: #ece7f5;
    font-size: 26rpx;

    .rcord-top {
      display: flex;
      justify-content: space-between;
    }
    .idCard {
      margin: 20rpx 0;
    }
  }
}
</style>
